<template>
  <div class="goods-detail">
    <van-nav-bar left-arrow @click-left="back" >
      <template #title>
        <div class="van-ellipsis">{{goods.title}}</div>
      </template>
    </van-nav-bar>
      
    <van-swipe class="goods-swipe" :autoplay="3000">
      <van-swipe-item v-for="thumb in goods.thumb" :key="thumb">
        <img :src="thumb" title="产品图" />
      </van-swipe-item>
    </van-swipe>

    <van-cell-group>
      <van-cell>
        <template #value>
          <div class="goods-title">{{ goods.title }}</div>
          <div class="goods-price">{{ goods.price }}</div>
        </template>
      </van-cell>
      <van-cell class="goods-express">
        <template #value>
          <van-col span="10">运费：{{ goods.express }}</van-col>
          <van-col span="14">剩余：{{ goods.remain }}</van-col>
        </template>
      </van-cell>
    </van-cell-group>

    <van-cell-group class="goods-cell-group">
      <van-cell value="进入店铺" icon="shop-o" is-link @click="sorry">
        <template #title>
          <span class="van-cell-text">果汁的店</span>
          <van-tag class="goods-tag" type="danger">官方</van-tag>
        </template>
      </van-cell>
      <van-cell title="线下门店" icon="location-o" is-link @click="sorry" />
    </van-cell-group>



    
    <van-tabs v-model:active="activeTab" ref="vTabs">
      <van-tab v-for="index in detailTabs" :title="index" :key="index" >
              <van-grid :column-num="2">
                <van-grid-item v-for="value in 14" :key="value" icon="photo-o" :text="index + value" />
              </van-grid>
      </van-tab>
    </van-tabs>

    <van-divider>
      <van-icon name="fire-o" color="#ee0a24" size="40" /> Logo
    </van-divider>
    <van-divider />
    <van-divider />
    <van-divider />

    <van-action-bar>
      <van-action-bar-icon icon="chat-o" @click="sorry">
        客服
      </van-action-bar-icon>
      <van-action-bar-icon icon="cart-o" @click="onClickCart">
        购物车
      </van-action-bar-icon>
      <van-action-bar-button type="warning" @click="sorry">
        加入购物车
      </van-action-bar-button>
      <van-action-bar-button type="danger" @click="sorry">
        立即购买
      </van-action-bar-button>
    </van-action-bar>
  </div>
</template>

<script>
import { reactive,ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { isInViewPort, fixPos, unfixPos, wid } from '/@//utils/hit.js'

export default {
  setup(props) {
      const activeTab = ref(0)
      const route = useRoute()
      const router = useRouter()
      const detailTabs = ref(["商品","评价","详情","推荐"])
      const goods = reactive({
        title: '美国伽力果（约680g/3个）',
        price: 2680,
        express: '免运费',
        remain: 19,
        thumb: [
          'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg',
          'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg',
        ],
      })
      console.log(route.meta)

      const back = () => router.back()
      const onClickCart = () => router.push("/cart")

      const vTabs = ref(null)

      const detailDesc = { detailTabs, vTabs }

      const backTop = ref(false)

      const scrollNew = (e) => {
        // await nextTick()
          let el = vTabs.value.$el
          console.log(el)
          if(isInViewPort(el, wid(600))){
            console.log("in View")
            fixPos(el.children[0])
          } else {
            unfixPos(el.children[0])
            console.log("out View")
          }

          // console.log("111", vTabs.value.$el)
      }

      onMounted(() =>{
        window.addEventListener("scroll", scrollNew, true)
        console.log("onMounted", "载入 scroll 事件", vTabs.value.$el)
      })

      onBeforeUnmount(() => {
        window.removeEventListener("scroll", scrollNew, true)
        console.log("onBeforeUnmount", "卸载 scroll 事件")
      })

      const sorry = () => {
        Toast('暂无后续逻辑~');
      }
      // tabs

      return { goods, activeTab, back, onClickCart, ...detailDesc, sorry}



  }
};
</script>

<style lang="less">
body {
  font-size: 16px;
  background-color: #f8f8f8;
  -webkit-font-smoothing: antialiased;
}

.goods {
  padding-bottom: 50px;

  &-swipe {
    img {
      width: 100%;
      display: block;
    }
  }

  &-title {
    font-size: 16px;
  }

  &-price {
    color: #f44;
  }

  &-express {
    color: #999;
    font-size: 12px;
    padding: 5px 15px;
  }

  &-cell-group {
    margin: 15px 0;

    .van-cell__value {
      color: #999;
    }
  }

  &-tag {
    margin-left: 5px;
  }
}
</style>
